@extends('common.base-master')

@section('html-head')
    <link rel="stylesheet" href="{{url('css/address.css')}}">
    <script src="{{url('js/address.js')}}"></script>
    <style type="text/css">
        button{width:100%;text-align:center;border-radius:3px;}
        .button2{font-size:16px;padding:8px 0;border:1px solid #adadab;color:#000000;background-color: #e8e8e8;background-image:linear-gradient(to top, #dbdbdb, #f4f4f4);background-image:-webkit-gradient(linear, 0 100%, 0 0, from(#dbdbdb),to(#f4f4f4));box-shadow: 0 1px 1px rgba(0,0,0,0.45), inset 0 1px 1px #efefef; text-shadow: 0.5px 0.5px 1px #ffffff;}
        .button2:active{background-color: #dedede;background-image: linear-gradient(to top, #cacaca, #e0e0e0);background-image:-webkit-gradient(linear, 0 100%, 0 0, from(#cacaca),to(#e0e0e0));}
        #mess_share{margin:15px 0;}
        #share_1{float:left;width:49%;}
        #share_2{float:right;width:49%;}
        #mess_share img{width:22px;height:22px;}
        #cover{display:none;position:absolute;left:0;top:0;z-index:18888;background-color:#000000;opacity:0.7;}
        #guide{display:none;position:absolute;right:18px;top:5px;z-index:19999;}
        #guide img{width:260px;height:180px;}
    </style>
@endsection

@section('html-body')
    <div class="sharecode-page" style="position: relative">
        <img src="{{url('images/share.png')}}" style="width: 100%;height: 100%">
        {{--<div class="detail-header">--}}
            {{--<div class="my-coins">我的福币：{{$userinfo->coin}}</div>--}}
        {{--</div>--}}
        <div  style="position:absolute;bottom: 92px;right: 27px;">
            {{$userinfo->invite_code}}
            {{--<span class="bg-share_code"></span>--}}
            {{--<div class="title">我的邀请码</div>--}}
            {{--<div class="code-box">{{$userinfo->invite_code}}</div>--}}
            {{--<div class="text">快去邀请吧<br/>您可以通过以下方式邀请您的小伙伴们</div>--}}
            {{--<div class="link-box">--}}
                {{--<a href=""><div class="box"><span class="bg-qq_icon"></span></div>QQ</a>--}}
                {{--<a href="javascript:void(0);" onclick="_system._guide(true)"><div class="box"><span class="bg-wechat"></span></div>微信</a>--}}
                {{--<a href="javascript:void(0);" onclick="_system._guide(true)"><div class="box"><span class="bg-pyq_icon"></span></div>朋友圈</a>--}}
            {{--</div>--}}
        </div>
    </div>
    <div id="cover"></div>
    <div id="guide"><img src="{{url('images/guide1.png')}}"></div>
    <script type="text/javascript">
        var _system={
            $:function(id){return document.getElementById(id);},
            _client:function(){
                return {w:document.documentElement.scrollWidth,h:document.documentElement.scrollHeight,bw:document.documentElement.clientWidth,bh:document.documentElement.clientHeight};
            },
            _scroll:function(){
                return {x:document.documentElement.scrollLeft?document.documentElement.scrollLeft:document.body.scrollLeft,y:document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop};
            },
            _cover:function(show){
                if(show){
                    this.$("cover").style.display="block";
                    this.$("cover").style.width=(this._client().bw>this._client().w?this._client().bw:this._client().w)+"px";
                    this.$("cover").style.height=(this._client().bh>this._client().h?this._client().bh:this._client().h)+"px";
                }else{
                    this.$("cover").style.display="none";
                }
            },
            _guide:function(click){
                this._cover(true);
                this.$("guide").style.display="block";
                this.$("guide").style.top=(_system._scroll().y+5)+"px";
                window.onresize=function(){_system._cover(true);_system.$("guide").style.top=(_system._scroll().y+5)+"px";};
                if(click){_system.$("cover").onclick=function(){
                    _system._cover();
                    _system.$("guide").style.display="none";
                    _system.$("cover").onclick=null;
                    window.onresize=null;
                };}
            },
            _zero:function(n){
                return n<0?0:n;
            }
        }
    </script>
@endsection